<template>
    <div>
        <div class="needpad" v-if="data.comments.length">
            <div v-for="(item, i) in data.comments" :key="i" class="author-title  reply-father">
                <img class="header-img" :src="item.avatar" />
                <div class="author-info">
                    <span class="author-name">
                        {{ item.nickname }}
                        <span v-if="data.sharer_id == item.user_id">
                            <van-tag type="danger">楼主</van-tag>
                        </span>
                    </span>
                    <div class="talk-box">
                        <p>
                            <span class="reply">{{ item.content }}</span>
                        </p>
                    </div>
                    <div class="author-content">
                        <span class="author-time">{{ item.timestamp }}</span>
                        <div style="margin-top: 4px;">
                            <span class="author-reply" @click="sendCommentReply(item)">回复</span>
                            <span class="author-reply" v-if="item.user_id == userInfo.user_id"
                                @click="delComment(item.comment_id)">删除</span>
                        </div>
                    </div>
                </div>
                <!-- <div class="icon-btn">
                    <i class="iconfont el-icon-caret-top">{{ item.reply_count }}</i>
                    <i class="iconfont el-icon-caret-top">{{ item.like_count }}</i>
                </div> -->
                <div class="reply-box">
                    <div v-for="(re, j) in item.reply" :key="j" class="author-title">
                        <img class="header-img" :src="re.avatar" />
                        <div class="author-info">
                            <span class="author-name" v-if="re.to_name">
                                {{ re.nickname }}
                                <span v-if="data.sharer_id == re.user_id">
                                    <van-tag type="danger">楼主</van-tag>
                                </span>
                                <van-icon name="play" />
                                {{ re.to_name }}
                                <span v-if="data.sharer_id == re.user_id">
                                    <van-tag type="danger">楼主</van-tag>
                                </span>
                            </span>
                            <span class="author-name" v-else>
                                {{ re.nickname }}
                                <span v-if="data.sharer_id == re.user_id">
                                    <van-tag type="danger">楼主</van-tag>
                                </span>
                            </span>
                            <div class="talk-box">
                                <p>
                                    <span class="reply">{{ re.content }}</span>
                                </p>
                            </div>
                            <div class="author-content">
                                <span class="author-time">{{ re.timestamp }}</span>
                                <div style="margin-top: 4px;">
                                    <span class="author-reply" @click="sendCommentReply(re)">回复</span>
                                    <span class="author-reply" v-if="re.user_id == userInfo.user_id"
                                        @click="delComment(re.comment_id)">删除</span>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="icon-btn">
                            <i class="iconfont el-icon-caret-top">{{ re.reply_count||10 }}</i>
                            <i class="iconfont el-icon-caret-top">{{ re.like_count ||1}}</i>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div v-else>
            <van-empty description="暂无评论，快来发表你的想法吧" />
        </div>

        <div class="my-reply">
            <img class="header-img"
                src="https://c-ssl.duitang.com/uploads/item/201708/01/20170801151835_scFm2.jpeg" />
            <div class="reply-info">
                <van-cell-group inset>
                    <van-field v-model="data.replyComment" :disabled="!userInfo.permissions.comment" :placeholder="!userInfo.permissions.comment?'您已被禁止发表评论':data.placeHolder" rows="1" autosize
                        type="textarea" />
                </van-cell-group>
            </div>
            <div class="reply-btn-box">
                <van-button class="reply-btn" :disabled="!userInfo.permissions.comment" @click="sendComment" type="primary">发送</van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { showToast } from 'vant';
import { onMounted, reactive } from 'vue';
//import { v4 as uuidv4 } from 'uuid';
import dayjs from 'dayjs';
import { userStore } from '@/store';
import { pubComment, getCardCommentByCardId, delCommentById } from '@/api/index'
import {formatRelativeToNow} from '@/utils/index'
import { storeToRefs } from 'pinia';
import { commentType } from '@/model';
import _ from 'lodash';
const user = userStore()
const { userInfo, shareList } = storeToRefs(user)


const props = defineProps({
    shareposts_id: {
        type: String,
        request: true
    }
})

const data = reactive({
    placeHolder: '请输入评论',
    replyComment: '',
    replyItem: {},
    comments: [],
    sharer_id: ''
})


onMounted(() => {
    getCommentList()
})

const formateTime = (arr: any) => {
    arr.forEach((item: commentType) => {
        item.timestamp = formatRelativeToNow(item.timestamp)
        if (item.reply && item.reply.length > 0) {
            formateTime(item.reply)
        }
    })
    return arr
}


const delComment = (id: string) => {
    delCommentById(id).then((res: any) => {
        if (res.code === 200) {
            getCommentList()
        }
    })
}



const sendComment = function () {
    if (!data.replyComment) {
        showToast('评论不能为空')
    } else {
        let a: any = {}
        let timestamp = new Date().getTime();
        a.timestamp = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
        a.reply_count = 0
        a.like_count = 0
        a.content = data.replyComment
        a.card_id = props.shareposts_id
        a.parent_comment_id = data.replyItem?.comment_id || null
        a.user_id = userInfo.value.user_id

        pubComment(a).then((res: any) => {
            if (res.code == 200) {
                getCommentList()
                data.replyComment = ''
                data.replyItem = {}
                data.placeHolder = '请输入评论'
                scrollToTop()
            }
        })

    }
}

const scrollToTop = () => {
    try {
        window.scroll({
            top: 0,
            left: 0,
            behavior: 'smooth'
        });
    } catch (err) {
        // 如果不支持 smooth scroll，则直接跳转
        window.scrollTo(0, 0);
    }
}

const getCommentList = () => {
    getCardCommentByCardId(props.shareposts_id).then((res: any) => {
        if (res.code == 200) {
            data.comments = formateTime(res.data)
            data.sharer_id = shareList.value.find((item: any) => item.shareposts_id == props.shareposts_id)?.sharer_id || ''
        }
    })
}
const sendCommentReply = function (comment: commentType) {
    data.placeHolder = '回复 ' + comment.nickname + '：'
    data.replyItem = comment
}

</script>

<style lang="less" scoped>
.needpad {
    box-sizing: border-box;
    padding-bottom: 3.5rem;
    overflow: scroll;
}

.my-reply {
    padding: 10px;
    background-color: #fafbfc;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: 40px auto 60px;
}

.header-img {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.my-reply .reply-info {
    display: inline-block;
    margin-left: 5px;
}


@media screen and (max-width: 1200px) {
    .my-reply .reply-info {
        width: 95%;
    }
}

.my-reply .reply-info .reply-input {
    min-height: 20px;
    line-height: 22px;
    padding: 10px 10px;
    color: #ccc;
    background-color: #fff;
    border-radius: 5px;
}

.my-reply .reply-info .reply-input:empty:before {
    content: attr(placeholder);
}

.my-reply .reply-info .reply-input:focus:before {
    content: none;
}

.my-reply .reply-info .reply-input:focus {
    padding: 8px 8px;
    border: 2px solid #00f;
    box-shadow: none;
    outline: none;
}


.my-reply .reply-btn-box .reply-btn {
    height: 95%;
    position: relative;
}

.my-comment-reply {
    margin-left: 50px;
}

.my-comment-reply .reply-input {
    width: flex;
}

.author-title:not(:last-child) {
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
}

.author-title {
    padding: 10px;
}

.author-title .header-img {
    display: inline-block;
    vertical-align: top;
}

.author-title .author-info {
    display: inline-block;
    margin-left: 5px;
    width: 60%;
    height: 40px;
    line-height: 20px;
}

.author-title .author-info>span {
    display: block;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.author-title .author-info .author-name {
    color: #000;
    font-size: 16px;

}

.author-title .author-info .author-time {
    margin-top: 5px;
    font-size: 14px;
}

.author-title .icon-btn {
    width: 30%;
    padding: 0 !important;
    float: right;
}

@media screen and (max-width: 1200px) {
    .author-title .icon-btn {
        width: 20%;
        padding: 7px;
    }
}

.author-title .icon-btn>span {
    cursor: pointer;
}

.author-title .icon-btn .iconfont {
    margin: 0 5px;
}

.author-title .talk-box {
    margin: 10px 0 2px 0;
}

.author-title .talk-box>p {
    margin: 0;
}

.author-title .talk-box .reply {
    font-size: 18px;
    color: #000;
}

.author-title .reply-box {
    margin: 10px 0 0 50px;
    background-color: #efefef;
}

.author-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .author-reply {
        margin-left: 5px;
        margin-top: 2px;
        font-size: 15px;
    }
}
</style>